<template>
  <view class="feature-grid">
    <view
      class="feature-item"
      v-for="(item, index) in features"
      :key="index"
      @click="navigateToFeature(item)"
    >
      <view class="feature-icon-wrapper">
        <FeatherIcon :name="item.icon" size="28" color="#ff9800" />
      </view>
      <text class="feature-name">{{ item.name }}</text>
    </view>
  </view>
</template>

<script setup>
import FeatherIcon from "@/components/FeatherIcon.vue";

const props = defineProps({
  features: {
    type: Array,
    required: true,
  },
});

// 跳转到功能页面
const navigateToFeature = (feature) => {
  if (feature.url.startsWith("/pages/")) {
    if (
      feature.url.indexOf("list") !== -1 ||
      feature.url.indexOf("chat") !== -1 ||
      feature.url.indexOf("profile") !== -1
    ) {
      uni.switchTab({
        url: feature.url,
      });
    } else {
      uni.navigateTo({
        url: feature.url,
      });
    }
  }
};
</script>

<style lang="scss">
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 16rpx 0;
  margin: 24rpx 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .feature-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24rpx 0;
  }

  .feature-icon-wrapper {
    width: 90rpx;
    height: 90rpx;
    margin-bottom: 12rpx;
    border-radius: 50%;
    background-color: rgba(255, 152, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature-name {
    font-size: 26rpx;
    color: #333;
  }
}
</style>
